<template>
  <div class="user-profile">
    <van-nav-bar class="header" :fixed="true" title="个人信息">
      <template #left>
        <van-icon name="arrow-left" size="18" @click="$router.back()" />
      </template>
    </van-nav-bar>
    <div class="bbbb"></div>
    <!-- 头像 -->
    <!-- 影藏域 上传文件 -->
    <input hidden type="file" @change="changefile" ref="input" />
    <van-cell title="头像" value="内容" size="large" is-link @click="imgfunc">
      <van-image class="avatar" fit="cover" round :src="profileInfo.photo" />
    </van-cell>
    <van-cell title="昵称" :value="profileInfo.name" size="large" is-link @click="nameBtn" />
    <van-cell
      title="性别"
      :value="profileInfo.gender===1 ? '女':'男'"
      size="large"
      is-link
      @click="genderBtn"
    />
    <van-cell title="生日" :value="profileInfo.birthday" size="large" is-link @click="birthdayBtn" />

    <!-- 图片裁剪弹出层 -->
    <van-popup v-model="isphotoShow" closeable position="bottom" :style="{ height: '100%' }">
      <user-photo :url="profileInfo.photo" @close="isphotoShow=false"></user-photo>
    </van-popup>
    <!-- 弹出层 昵称-->
    <van-popup v-model="isShow" position="bottom" :style="{ height: '100%' }">
      <update-name @close="isShow=false" @nickname="nickname"></update-name>
    </van-popup>
    <!-- 性别 -->
    <van-popup v-model="isGenderShow" position="bottom" :style="{ height: '40%' }">
      <user-sex @close="isGenderShow=false" @gender='gender'></user-sex>
    </van-popup>
    <!-- 生日 -->
    <van-popup v-model="isBirthdayShow" position="bottom" :style="{ height: '40%' }">
      <user-birthday @close="isBirthdayShow=false" @birthFunc="birthFunc"></user-birthday>
    </van-popup>
  </div>
</template>
             
<script>
import { getUserprofile_api } from "@/api/article/index";
import updateName from "@/components/user-profile/update-name";
import userSex from "@/components/user-profile/user-sex";
import userBirthday from "@/components/user-profile/user-birthday";
import userPhoto from "@/components/user-profile/user-photo";
export default {
  components: {
    updateName,
    userSex,
    userBirthday,
    userPhoto
  },
  data() {
    return {
      isphotoShow: false,
      isShow: false,
      isGenderShow: false,
      isBirthdayShow: false,
      profileInfo: {}
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    //打开昵称
    nameBtn() {
      this.isShow = true;
    },
    //打开性别
    genderBtn() {
      this.isGenderShow = true;
    },
    //打开生日
    birthdayBtn() {
      this.isBirthdayShow = true;
    },
    //获取用户个人信息-------------------
    async getUser() {
      const { data: res } = await getUserprofile_api();
      // console.log(res, "rrrrrr");
      this.profileInfo = res.data;
    },
    //修改用户昵称------------------
    nickname(val) {
      // console.log(val,'ttttt');
      this.isShow = false;
      this.profileInfo.name = val;
    },
    //性别修改-------------------
    gender(val) {
       this.isGenderShow=false
       this.profileInfo.gender=val
    },
    //生日修改--------------------
    birthFunc(val) {
      this.isBirthdayShow = false;
      this.profileInfo.birthday = val;
    },
    /* 图片更改
    1、选择图片
      1、点击图片触发input表单实现选择图片
    2、显示对话框 
      1、对话框中显示的是刚刚上传的图片
      2、显示裁切的效果
      3、取消：关闭对话框
      4、点击确认：关闭对话框+发送请求
    */
    //触发 input 表单事件
    imgfunc() {
      this.$refs.input.click();
    },
    //上传文件，获取input dom元素
    changefile() {
      var files = this.$refs.input.files[0];
      //把我获取的图片资源转成url路径
      var url = window.URL.createObjectURL(files);
      this.profileInfo.photo = url;
      this.isphotoShow = true;
    }
  }
};
</script>
<style scoped lang="less">
.user-profile {
  background-color: #dddd;
  width: 100%;
  height: 1200px;
  .bbbb {
    margin-top: 95px;
  }
  .avatar {
    width: 50px;
    height: 50px;
  }
  .van-popup {
    background-color: #eeee;
  }
  /deep/.van-nav-bar.header {
    background-color: #2793ff;
    .van-nav-bar__title {
      color: #fff;
    }
    .van-icon-arrow-left {
      color: #fff;
    }
  }
}
</style>